<script  lang="ts" setup>
import {onMounted, ref} from 'vue'
import AddAddressDialog from "@/views/UserCenter/addAddressDialog.vue";
import {useUserStore} from '@/stores/user'
import {useAddressStore} from '@/stores/address'
import { RegionFullText } from 'v-region'
import EditAddressDialog from "@/views/UserCenter/changeAddressDialog.vue";
import {getAddressListAPI,delAddressAPI,alterAddressAPI} from '@/apis/address'
import {ElMessage} from "element-plus";

onMounted(()=>{
  getAllAddress()
})

const addDialogRef=ref()
const editDialogRef=ref()

const getAllAddress=async ()=>{
  let uid=useUserStore().userInfo.uid
  const res= await getAddressListAPI(uid)
  if(res.code===200){
    //存储到本地
    useAddressStore().loadAddressList(res.data)
  }
}

let selectedIndex=''
let selectedRow={}

const handleDelete = (index, row) => {
  delDialogVisible.value=true
  selectedIndex=index
  selectedRow=row
}

const deleteAddress=async (index,row)=>{
  //更新默认地址
  if(row.isDefault===1&&useAddressStore().addressList.length>=2){
    useAddressStore().addressList[index===0?index+1:0].isDefault=1
    const result= await alterAddressAPI(useAddressStore().addressList[index === 0 ? index + 1 : 0])
    if(result.code!==200){
      useAddressStore().addressList[index===0?index+1:0].isDefault=0
    }
  }

  //请求后端
  const res =await delAddressAPI(row.aid)
  console.log(res)
  ElMessage({
    message: res.code===200?'删除成功':res.message,
    type: res.code===200?'success':'error',
  })

  //更新本地数据
  if(res.code===200){
    useAddressStore().delAddress(index)
  }
}


const setDefault=async (index,row)=>{
  //请求后端
  row.isDefault=1
  const res=await alterAddressAPI(row)
  console.log(res)
  if(res.code===200){
    //更新本地
    useAddressStore().setDefault(index)
  }else{
    row.isDefault=0
  }
}

const delDialogVisible = ref(false)

</script>

<template>
  <div class="addressPanel">
    <div class="header">
      <span style="color:#11192d;font-size: 16px;margin-right: auto;font-weight: bold">我的收货地址</span>
      <el-button style="float: right" @click="addDialogRef.changeVisible()">添加地址</el-button>
      <br><br>
      <span style="color:#50607a;font-size: 16px;">常用地址</span>
    </div>

    <div class="center">
      <el-table :data="useAddressStore().addressList" ref="table" style="width: auto">
        <el-table-column prop="receiver_name" label="收货人" width="100" />
        <el-table-column prop="phoneNumber" label="电话/手机" width="120" />

        <el-table-column prop="" label="所在地区" width="200" >
          <template #default="scope">
            <RegionFullText  separator="-" v-model="scope.row" />
          </template>
          </el-table-column>

        <el-table-column prop="address" label="详细地址" width="200" />
        <el-table-column prop="" label="操作" width="180" >
          <template #default="scope">
            <span class="btn" @click="editDialogRef.changeVisible(scope.$index,scope.row)">修改</span>&nbsp;&nbsp;
            <span class="btn" @click="handleDelete(scope.$index, scope.row)">删除</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="移动设置">
          <template #default="scope">
            <template v-if="scope.row.isDefault">
              <el-tag type="warning">默认地址</el-tag>
            </template>
            <template v-else-if="!scope.row.isDefault">
              <span class="btn" @click="setDefault(scope.$index,scope.row)">设为默认</span>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <add-address-dialog ref="addDialogRef"></add-address-dialog>
    <edit-address-dialog ref="editDialogRef"></edit-address-dialog>
    <el-dialog
        v-model="delDialogVisible"
        title="提示"
        width="500"
    >
      <span>确认删除吗</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="delDialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="delDialogVisible = false;
                     deleteAddress(selectedIndex,selectedRow)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.addressPanel{
  width: 990px;
  height: 600px;
  background-color: white;
  border-radius: 10px;
  padding: 10px 20px;

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.header{
  width: 900px;
  height: 100px;
  margin-top: 20px;
  //background-color: #39bf3e;
}

.center{
  width: 900px;
  height: auto;
}
.btn{

}
.btn:hover{
  cursor: pointer;
  color: #39bf3e;
}
</style>